<template>
  <view class="classified-product">
    <!-- 标签专区商品 -->
    <view class="tabs">
      <scroll-view  :scroll-with-animation="true"
                    :scroll-left="scrollLeft"
                    id="tab_scroll"
                    :scroll-x="true"
                    class="tabs_sll">
      <view
          :style="{
              display: 'flex',
              whiteSpace: 'normal',
            }"
      >
        <view class="tabs_container" :style="{
                fontWeight: 700,
                fontSize: '38rpx',
              }">
          <view style="z-index: 2">{{ categoryName }}</view>
          <image
              src="../../static/home/xuanzhong.png"
              class="tabs_container_iocn"
              style="width: 110rpx; height: 52rpx"
          ></image>
        </view>
      </view>
      </scroll-view>
    </view>
    <view class="commodity">
      <view>
        <view
            class="commodity_list"
            v-for="(item, index) in list"
            :key="index"
        >
          <ProductItem
              v-if="index % 2 === 0"
              :productObj="item"
              :showXinjiu="false"
              :showTag="true"
          >
            <XinjiuSlot slot="topLeft" :productObj="item"></XinjiuSlot>
          </ProductItem>
        </view>
      </view>
      <view>
        <view
            class="commodity_list"
            v-for="(item, index) in list"
            :key="index"
        >
          <ProductItem
              v-if="index % 2 !== 0"
              :productObj="item"
              :showXinjiu="false"
              :showTag="true"
          >
            <XinjiuSlot slot="topLeft" :productObj="item"></XinjiuSlot>
          </ProductItem>
        </view>
      </view>
    </view>
    <view class="home-bottom" v-if="pageNum * pageSize - total >= 10">
      <text style="text-align: center">没有更多啦，快去挑选商品吧～</text>
    </view>
  </view>
</template>

<script>
import ProductItem from "../../components/productItem/productItem.vue"
import XinjiuSlot from "../../components/productItem/slots/xinjiu.vue"
import classIfiedService from "./services";
import uniSwiperDot from "../../components/uni-swiper-dot/uni-swiper-dot";
import homeService from "../index/services";
	import {
		categoryeInfo
	} from '../../api/index.js'

export default {
  data() {
    return {
      categoryId: 0,
      categoryName: '',
      pageNum: 1, //商品页数
      pageSize: 10, //每一页条数
      total: 1, //总条数
      list:[],
    }
  },
  components: {
    ProductItem,
    XinjiuSlot,
  },
  onLoad(e){
    this.categoryId = this.$getPageParams(e, "categoryId")
	categoryeInfo({
		method: 'GET',
		data: {
			categoryId:this.categoryId 
		}
	}).then(res => {
		if (res.statusCode === 200) {
			console.log(res.data.data.name,"categoryeInfo")
			this.categoryName=res.data.data.name
		}
	})
    // this.categoryName = this.$getPageParams(e, "categoryName")
    this.onList()
  },
  onPullDownRefresh() {
    this.pageNum = 1
    this.total = 1
    this.onList()
  },
  onReachBottom() {
    this.onScrollToLower()
  },
  methods:{
    onList(){
      classIfiedService
          .listLiteCategoryProduct({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            categoryId: this.categoryId,
          })
          .then((res) => {
            this.list = res.data.records
            this.total = res.data.total

            uni.stopPullDownRefresh()
          })
    },
    /**
     获取当前标签的商品
     @param {*} e : 判断是否是切换tab
     */
    onScrollToLower() {
      //判断是否需要请求商品
      if (this.pageNum * this.pageSize - this.total >= 10) {
        uni.showToast({
          title: "没有更多啦～",
        })
        return
      }
      //翻页功能每次下拉需要页数加一
      this.pageNum = this.pageNum + 1
      classIfiedService
          .listLiteCategoryProduct({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            categoryId: this.categoryId,
          })
          .then((res) => {
            //让list合并
            this.list = this.list.concat(res.data.records || [])
            this.total = res.data.total
          })
    },
  }
}
</script>
<style lang="scss">
.classified-product {
  background-image: url("@/static/home/jianbian.png");
  background-repeat: no-repeat;

  .tabs {
    .tabs_sll {
      width: 711rpx;
      height: 100rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      margin: 20rpx auto;
      background-color: #ffffff;
    }
    .tabs_container {
      margin: 0 30rpx;
      display: flex;
      align-items: flex-end;
      color: #333333;
      position: relative;
      .tabs_container_iocn {
        @include cl();
        top: 15rpx;
      }
    }
  }

  .commodity {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
  }
  .commodity_list {
    break-inside: avoid;
    width: 344rpx;
  }
  .home-bottom {
    text-align: center;
    margin: 20rpx 0;
  }
}
</style>